<template>
  <div class="search-sideBar">
    <van-sidebar v-model="currentActive" class="side-bar">
      <template v-for="(item, index) in sideData" :key="index">
        <van-sidebar-item
          v-if="item.itemTypeLabel"
          :title="item.itemTypeLabel"
        />
        <van-sidebar-item v-else :title="item.label" />
      </template>
    </van-sidebar>

    <div class="side-content">
      <!-- 如果没有二级列表 直接展示列表内容 -->
      <template
        v-for="(addrInfo, index) in sideData[currentActive].items"
        :key="index"
      >
        <div
          v-if="sideData[currentActive].items"
          :class="['item', addrInfo.isSelect ? 'active' : '']"
          @click="clicksideSecond(currentActive, index)"
        >
          <div class="name">{{ addrInfo.label }}</div>
          <span class="desp" v-if="addrInfo.percentageUser">
            {{ addrInfo.percentageUser }}
          </span>
        </div>
      </template>
      <!-- 如果有二级列表 用sidebar再次排序 -->
      <template v-if="secondGroup.length">
        <div class="sideSecond">
          <van-sidebar v-model="secondActive" class="sideSecond-bar">
            <template v-for="(item, index) in secondGroup" :key="index">
              <van-sidebar-item :title="item.label" />
            </template>
          </van-sidebar>

          <div class="sideSecond-content">
            <template v-for="(i, x) in secondGroupItems" :key="x">
              <div
                :class="['second-item', i.isSelect ? 'active' : '']"
                @click="handleSubItemClick(x)"
              >
                {{ i.label }}
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
const currentActive = ref(0);
const props = defineProps({
  sidebarData: {
    type: Object,
    default: () => ({}),
  },
});
// 将props.locationData => sideData 变成响应式数据
const sideData = ref([]);
watch(
  () => props.sidebarData,
  (newvalue, oldvalue) => {
    sideData.value = newvalue;
  },
  {
    immediate: true,
  }
);
// 每次点击标题 选择设置
const clicksideSecond = (currentActive, index) => {
  // 当前分组位置
  if (sideData.value[currentActive]) {
    let addrInfos = sideData.value[currentActive].items || [];
    // 将当前的index 的isSelect 为 true
    addrInfos.forEach((item, i) => {
      item.isSelect = i === index;
    });
  }
};
// 当前的currentActive如果有二级列表操作
const secondActive = ref(0);
// 获取二级列表
const secondGroup = computed(() => {
  let temp = sideData.value[currentActive.value].subGroups || [];
  console.log(temp);
  return temp;
});
// 获取二级列表中 item数据
const secondGroupItems = computed(() => {
  let subMenus = sideData.value[currentActive.value].subGroups || [];
  let result = [];
  if (subMenus.length) {
    result = subMenus[secondActive.value] || {};
  }
  result = result.items || [];
  return result;
});
// 二级列表选择事件
const handleSubItemClick = (index) => {
  if (sideData.value[currentActive.value]) {
    let subGroup = sideData.value[currentActive.value].subGroups || [];
    let addrInfos = subGroup[secondActive.value].items || [];
    addrInfos.forEach((item, i) => {
      item.isSelect = i === index;
    });
  }
};
</script>

<style lang="less" scoped>
@popupHeight: 500px;
.side-bar :deep(.van-sidebar) {
  height: calc(@popupHeight - 60px);
}
.search-sideBar {
  display: flex;
  flex-direction: row;
}
.side-content {
  flex: 1;
  overflow-y: auto;
  height: calc(@popupHeight - 60px);
  background-color: white;

  .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 55px;
    width: 100%;
    padding: 0 20px 0 10px;

    font-size: 14px;
    .name {
      // max-width: 200px;
      padding-bottom: 6px;
    }

    .desp {
      font-size: 12px;
      color: #999;
    }
  }
  .active {
    background-color: #fffcf5;
  }
  .sideSecond {
    display: flex;
    flex-direction: row;
    .sideSecond-content {
      width: 100%;
      .second-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px 0 10px;
        height: 55px;
        width: 100%;
      }
    }
  }
  .sideSecond-bar {
    width: 130px !important;
  }
}
</style>
